<template>
  <s-modal title="详情" :visible="visible" width="800px" :footer="null" @cancel="visible = false">
    <div style="height: 400px">
      <s-scroll>
        <s-form :value="formValue">
          <s-form-item
            label="应用名称"
            size="middle"
            name="name"
            :colon="true"
            :display-title="true"
            :rules="[
              { whitespace: true, required: true, message: '应用名称不能为空' },
              { max: 20, message: '最长为20位' }
            ]"
          >
            <s-input
              v-model="formValue.name"
              :allow-clear="true"
              placeholder="请输入应用名称"
              disabled
            />
          </s-form-item>
          <s-form-item
            label="编码"
            size="middle"
            name="code"
            :colon="true"
            :display-title="true"
            :rules="[
              { whitespace: true, required: true, message: '编码不能为空' },
              { max: 30, message: '最长为30位' },
              { pattern: '^([A-Za-z0-9]|_)+$', message: '编码格式不正确' }
            ]"
          >
            <s-input
              v-model="formValue.code"
              :allow-clear="true"
              placeholder="请输入编码"
              disabled
            />
          </s-form-item>
          <s-form-item
            label="所属类别"
            size="middle"
            name="type"
            :colon="true"
            :display-title="true"
          >
            <s-select
              v-model="formValue.type"
              :allow-clear="true"
              placeholder="请输入所属类别"
              :show-search="true"
              code="APP_TYPE"
              disabled
            />
          </s-form-item>
          <s-form-item
            label="访问地址"
            size="middle"
            name="accessPath"
            :colon="true"
            :display-title="true"
            :rules="[
              { whitespace: true, required: true, message: '访问地址不能为空' },
              { max: 255, message: '最长为255位' }
            ]"
          >
            <s-input
              v-model="formValue.accessPath"
              :allow-clear="true"
              placeholder="请输入访问地址"
              disabled
            />
          </s-form-item>
          <s-form-item
            label="应用概况"
            size="big"
            name="appDesc"
            :colon="true"
            :display-title="true"
            :rules="[{ max: 2000, message: '最长为2000位' }]"
          >
            <s-text-area
              v-model="formValue.appDesc"
              :allow-clear="true"
              placeholder="请输入应用概况"
              :row-num="4"
              disabled
            />
          </s-form-item>
          <s-form-item
            label="应用图标"
            size="middle"
            name="icon"
            :colon="true"
            :display-title="true"
          >
            <s-img v-model="formValue.icon" :allow-clear="true" :max="1" disabled />
          </s-form-item>
          <s-form-item
            label="排序号"
            size="middle"
            name="orderNum"
            :rules="[{ required: true, message: '排序号不能为空' }]"
          >
            <s-input-number v-model="formValue.orderNum" placeholder="请输入排序号" disabled />
          </s-form-item>

          <s-form-item label="创建人" prop="createByAccount">
            <s-input v-model="formValue.createByAccount" :allow-clear="true" disabled />
          </s-form-item>
          <s-form-item label="创建时间" prop="createDate">
            <s-input v-model="formValue.createDate" :allow-clear="true" disabled />
          </s-form-item>
          <s-form-item label="修改人" prop="updateByAccount">
            <s-input v-model="formValue.updateByAccount" :allow-clear="true" disabled />
          </s-form-item>
          <s-form-item label="修改时间" prop="updateDate">
            <s-input v-model="formValue.updateDate" :allow-clear="true" disabled />
          </s-form-item>
        </s-form>
      </s-scroll>
    </div>
  </s-modal>
</template>

<script>
export default {
  name: 'Detail',
  data() {
    return {
      formValue: {},
      visible: false
    }
  },
  methods: {
    open(id) {
      this.formValue = {}
      this.$loading(true)
      this.$api
        .GET('/realm/app/selectOneById', { id: id })
        .then((res) => {
          if (!res.data) {
            this.$loading(false)
            this.visible = false
            this.$message.warn('数据不存在')
          } else {
            this.formValue = res.data
            this.$loading(false)
            this.visible = true
          }
        })
        .catch(() => {
          this.$loading(false)
        })
    }
  }
}
</script>

<style lang="less" scoped></style>
